<template>
  <div class="equipmentXQ">
    <el-dialog
      title="详情"
      :visible.sync="centerDialogVisible"
      width="75%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"

      >
      <div style="max-width:1000px;margin:auto;">
    <h4>基础信息</h4>
    <table border="1" rules="all" class="table">
      <tr>
        <td>标题</td>
        <td colspan="3">{{detailForm.acceptTitle}}</td>
      </tr>
      <tr>
        <td>验收人</td>
        <td>{{detailForm.acceptUserName}}</td>
        <td>验收时间</td>
        <td>{{detailForm.acceptDate}}</td>
      </tr>
      <tr>
        <!-- <td>验收类别</td>
        <td>{{detailForm.acceptTypeName}}</td> -->
        <td>采购计划单</td>
        <td colspan="3">{{detailForm.acceptCode}}</td>
      </tr>
<!--      <tr>-->
<!--        <td>采购计划</td>-->
<!--        <td colspan="3">{{purchasePlanName}}</td>-->
<!--      </tr>-->
      <tr>
        <td>说明</td>
        <td colspan="3">{{detailForm.remark}}</td>
      </tr>
    </table>
    <h4>详细信息</h4>
    <el-table :data="detailForm.deviceAcceptDetailList" border>
      <el-table-column type="index" label="序号" width="55"/>
      <el-table-column label="名称" property="deviceName"/>
      <el-table-column label="规格型号" property="deviceModel"/>
      <el-table-column label="数量" property="anticipatedProcureNum"/>
      <!-- <el-table-column label="预计单价" property="anticipatedProcurePrice"/> -->
      <!-- <el-table-column label="品牌" property="deviceBrand" width="150"/> -->
      <el-table-column label="单位" property="deviceUnitName"/>
      <!-- <el-table-column label="生产厂家" property="supplier"/> -->
      <el-table-column label="需要程度" property="degreeNeed"/>
      <el-table-column label="用途" property="purpose"/>
      <el-table-column label="使用单位" property="recipientsDeptName" width="150px"/>
      <el-table-column label="设备分类" property="deviceTypeName" width="150px"/>
      <el-table-column label="备注" property="remark"/>
      <!-- <el-table-column label="小计" prop="anticipatedSubtotal"/> -->
    </el-table>
    <!-- <el-table  :data="detailForm.deviceAcceptDetailList"  border>
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="设备编号" property="deviceCode" :show-overflow-tooltip="true"  > </el-table-column>
      <el-table-column align="center" label="资产编号" property="assetsCode" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="设备名称"  property="deviceName" width="100" ></el-table-column>
      <el-table-column label="电子标签码" property="electronicLabel" align="center" width="100"> </el-table-column>
      <el-table-column align="center" label="单位" property="deviceUnitName" :show-overflow-tooltip="true" width="150" ></el-table-column>
      <el-table-column align="center" label="出厂编号"  property="factoryCode" :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="类别" property="deviceTypeName"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="品牌" property="deviceBrandName"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="规格型号" property="deviceModel"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="存放位置" property="repositoryName"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="购置日期" property="buyDate"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="购置金额" property="buyMoney"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="下一步" property="nextStepAcceptTypeName"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="设备状态" property="deviceStatusName"  :show-overflow-tooltip="true" > </el-table-column>
      <el-table-column align="center" label="验收结果" property="checkResult"  :show-overflow-tooltip="true" >
        <template slot-scope="scope" style="text-align: center">
          <span v-show="scope.row.checkResult==1" >合格</span>
          <span v-show="scope.row.checkResult==2">不合格</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="验收说明" property="checkExplain"  :show-overflow-tooltip="true" > </el-table-column>

    </el-table> -->
    <div class="upload">
      <h4>相关文件</h4>
      <el-table  style="width: 900px" :data="detailForm.annexFileList"  border>
        <el-table-column align="center" type="index" label="序号"  width="55"  />
        <el-table-column align="center" label="上传日期"  prop="createDate"  />
        <el-table-column align="center" label="附件"  prop="">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="fileDown(scope.row.filePath)">
              {{scope.row.fileName}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { deviceAcceptDetail,procurePlanDetail} from '@/api/purchase/index'

  export default {
    props:['pid'],
     data() {
      return {
        detailForm: '',
        purchasePlanName:'',
        centerDialogVisible:true
      };
    },
    created() {
      this.getDetail(this.pid)
    },
    methods: {
      close(){
        this.$emit('subSetChane')
      },
      async getDetail(id) {
        let res = await deviceAcceptDetail(id)
        this.detailForm = res.data
        //获取采购计划
        if(res.data.purchasePlanId){
          this.getPlanDetail(res.data.purchasePlanId)
        }
      },
      async getPlanDetail(id) {
        let res = await procurePlanDetail(id)
        this.purchasePlanName = res.data.title
      },
      async fileDown(index,fileName,filePath){
        this.downloadFile(encodeURI(filePath))
      },
    }
  };
</script>
<style scoped lang="scss">
  .equipmentXQ{
    margin-left: 20px;
    .dialog >>> .el-dialog__body{
      height: 85vh;
      overflow: scroll;
    }
    h4{
      color: #05A380;
    }
    .table {
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;
      tr {

        td:nth-child(2n-1) {
          width: 180px;
          text-align: center;
        }

        td:nth-child(2n) {
          width: 320px;
          padding-left: 10px;
        }

        td {
          line-height: 35px;
        }
      }
    }
    .unloadBox {
      border: 1px solid #cccccc;
      margin-top: 20px;
      min-height: 50px;
      overflow: hidden;
      width: 1000px;

      .file {
        width: 100%;
        border-top: 1px #cccccc dotted;
        line-height: 50px;

        .index {
          padding: 0 10px;
          color: #666
        }

        i {
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }

        .type {
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
    }

  }
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }
  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .fujian {

    color: #787be8;
    margin-top: 15px;
  }
  .fujian span{
    margin-left: 15px;
    cursor: pointer;
  }
</style>
